<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow: auto;
			}
			li{
				height: 100px;
			}
		</style>
		<title>初识Vue</title>
		<!-- 
				Vue中的事件修饰符：
						1.prevent：阻止默认事件（常用）；
						2.stop：阻止事件冒泡（常用）；
						3.once：事件只触发一次（常用）；
						4.capture：使用事件的捕获模式；
						5.self：只有event.target是当前操作的元素时才触发事件；
						6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
		-->
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 阻止默认事件 -->
			<a href="http://www.atguigu.com" @click.prevent="show">点跳转</a>
			<!-- 阻止事件冒泡  可以组合使用 -->
			<div @click="show1" class="demo1">
				<button @click.stop.prevent="show1">dian</button>
			</div>
			<!-- 事件只触发一次 -->
			<button @click.once="show2">2</button>
			<!-- 使用事件的捕获模式 有就是1-2 没有就是2-1 -->
			<div class="box1" @click.capture="msg(1)">
				div
				<div class="box2" @click="msg(2)">
                    div
				</div>
			</div>
			<!-- 只有event.target是当前操作的元素时才触发事件 -->
			<div @click="show3.self" class="demo1">
				<button @click="show3">dian</button>
			</div>
			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<!-- scroll滚动条的滚动事件  wheel滚轮的滚动事件 -->
			<ul @wheel.passive="demo" class="list"> 
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
		</div>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#root',
				data:{

				},
				methods:{
					show(){
						alert(0)
					},
					show1(e){
						//e.stopPropagation()//阻止冒泡
						alert(1)
					},
					show2(){
						alert(2)
					},
					msg(num){
                      alert(num)
					},
					show3(){
						alert(event.target)
					},
					demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('累坏了')
				}
				}
			})

		</script>
	</body>
</html>

